<template>
  <div :id="id" :style="{ height: height, width: width }"></div>
</template>

<script>
export default {
  props: {
    id: String, //图表id
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    studentnumber_list: Array,
    teachernumber_list: Array,
    schoolname_list: Array,
  },
  data() {
    return {
      chart: null,
      windowWidth: document.documentElement.clientWidth,
    };
  },
  watch: {
    studentnumber_list: {
      handler(newValue) {
        if (this.chart != null && this.chart != "" && this.chart != undefined) {
          let option = this.chart.getOption();
          console.log(option.series);
          option.series[0].data = newValue;
          this.chart.setOption(option);
          console.log("aaa");
        } else {
          // 真正在页面上显示图表的是下面这一行
          this.drawRing();
        }
      },
      deep: true,
    },
    teachernumber_list: {
      handler(newValue) {
        if (this.chart != null && this.chart != "" && this.chart != undefined) {
          let option = this.chart.getOption();
          console.log(option.series);
          option.series[1].data = newValue;
          this.chart.setOption(option);
        }
      },
      deep: true,
    },
  },
  mounted() {
    // 下面那一行加了也不起作用，因为父子生命周期的原因，所以还没有数据
    // this.drawRing();
  },
  beforeDestroy() {
    //销毁chart
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    drawRing() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById(this.id), null, {
        renderer: "svg",
      });

      // 绘制图表
      this.chart.setOption(
        {
          tooltip: {},
          legend: {
            top: "2%",
            right: "5%",
            bottom: "5%",
            textStyle: {
              fontSize: 10,
            },
            itemWidth: 10,
            itemHeight: 8,
          },
          grid: {
            left: "2%",
            right: "5%",
            bottom: "3%",
            top: "18%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            axisLabel: {
              fontSize: "10",
              margin: 4,
            },
          },
          yAxis: {
            type: "category",
            inverse: true,
            data: this.schoolname_list,
            axisLabel: {
              fontSize: 10,
              margin: 4,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              name: "学生人数",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: 8,
              },
              emphasis: {
                focus: "series",
              },
              data: this.studentnumber_list,
              barCategoryGap: 10,
            },
            {
              name: "老师人数",
              type: "bar",
              stack: "total",
              label: {
                show: true,
                fontSize: 8,
              },
              emphasis: {
                focus: "series",
              },
              data: this.teachernumber_list,
            },
          ],
        },
        true
      );
    },
  },
};
</script>

